<template>
    <div id="miniProgram" class="cont">
        <div class="text-2xl">小程序设置</div>
        <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="开发设置">
                <Development></Development>
            </a-tab-pane>
            <a-tab-pane key="2" tab="支付设置">
                <Payment></Payment>
            </a-tab-pane>
            <a-tab-pane key="3" tab="地图设置">
                <Map></Map>
            </a-tab-pane>
            <a-tab-pane key="4" tab="阿里云配置">
                <AlibabaCloud></AlibabaCloud>
            </a-tab-pane>
            <a-tab-pane key="5" tab="企业微信配置">
                <WeCom></WeCom>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script setup lang="ts">
import Development from './components/development.vue';
import Payment from './components/payment.vue';
import Map from './components/map.vue';
import AlibabaCloud from './components/alibabaCloud.vue';
import WeCom from './components/weCom.vue';

const activeKey = ref('1')
</script>

<style scoped lang="scss">
#miniProgram {
    :deep(.ant-form) {
        width: 500px;
        .ant-form-item-row{
            display: grid;
            grid: 1fr;
            .ant-form-item-label{
                text-align: left;
            }
        }
    }
}
</style>